<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;
        margin: 0;
        list-style: none;}
        a{text-decoration: none;}
        .header{height: 40px;
        background-color: #000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        }
        .header-left{width: 500px;
        height: 100%;
        padding-left: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;}
        .header-left li a{font-size: 12px;
        color: #666;}
        .header-left li span{color: #666;
        margin: 0 5px;}
        .header-right{width: 200px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;}
        .header-right-le{width: 100px;
        height: 100%;
        text-align: center;
        line-height: 40px;
       }
        .header-right-le a,.header-right-le span{ font-size: 12px;
        color: #666;}
        .header-right-le span{margin: 0px 3px;}
        .header-right-ri{width: 80px;
        height: 100%;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
        color: #666;}
        .header-right-ri a{font-size: 12px;
        color: #666;}
        .nav-box{width: 1200px;
        height: 100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        }
        .nav-box-left{width: 55px;
        height: 55px;
        
        background-image: url(./image/xiaomi_logo.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: #000;
        }
        .nav-box-mi{width: 600px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        }
        .nav-box-mi li a{font-size: 14px;
        color: #333;}
        .nav-box-right{width: 250px;
        height: 50px;
        display: flex;
        }
        .nav-box-right input{width: 200px;
        height:100%;
        border: 1px solid #666;
        border-right: none;}
        .nav-box-right-logo{width: 50px;
        height: 50px;
        border: 1px solid #666;
        background-image: url(./image/timg.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .lunbotu-box{width: 1200px;
        height: 500px;
        margin: 0 auto;
        display: flex;
        }
        .lunbotu-home{width: 230px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
background-color: #333;
        }
        .lunbotu-home li{width:100%;
        height: 32px;
       }
        .lunbotu-home li a{font-size: 14px;
        color: #999;
        display: flex;
        justify-content: space-between;
        padding: 0px 15px;
        }
        .lunbotu-right{flex: 1;
        background-image: url(./image/大背景.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .section{width: 1200px;
        height: 200px;
        margin: 30px auto;
        display: flex;
        justify-content: space-between;
        }
        .section-fr{width: 230px;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        background-color: #666;
        }
        .section-fr li{width: 76px;
        height: 86px;
        }
        .section-fr li a{width: 76px;
        height: 86px;
            font-size: 12px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        }
        .section-se{width: 280px;
        height: 200px;
        cursor: pointer;
        background-image: url(./image/section.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;}
        .section-th{width: 280px;
        height: 200px;
        cursor: pointer;
        background-image: url(./image/section.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .section-fou{width: 280px;
        height: 200px;
        cursor: pointer;
        background-image: url(./image/section.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .danpin-box{width: 1200px;
        height: 250px;
        margin: 0 auto;
        }
       .danpin-list-container,.danpin-list-container ul{width: 100%;
       height: 210px;}
       .danpin-list-container ul{display: flex;
       justify-content: space-between;}
       .danpin-list-container ul li{width: 220px;
       height: 210px;
       text-align: center;
       border-top: 1px solid orange;}
       .danpin-list-container ul li a{
        width: 220px;
       height: 210px;
           display: flex;
       flex-direction: column;
       justify-content: space-around;
       align-items: center;}
       .danpin-list-pic{width: 200px;
       height: 120px;
       background-image: url(./image/手机.jpg);
       background-repeat: no-repeat;
       background-size: 100% 100%;
       }
       .danpin-list-p1{font-size: 14px;
       color: #666;}
       .danpin-list-p2{font-size: 12px;
       color: #999;}
       .last-box{width: 1200px;
       height: 520px;
       margin: 0 auto;
       background-color: #eee;}
       .last-box h3{font-size: 14px;
       color: #444;}
       .last-box-container{width: 100%;
       height: 500px;
       margin-top: 20px;
       display: flex;
       justify-content: space-between;
       }
       .last-left{width: 200px;
       height: 100%;
       }
       .last-left a img{width: 200px;
       height: 500px;}
       .last-right{flex: 1;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       }
      .last-right li a{width: 240px;
       height: 240px;
       text-align: center;
      }
      .last-right li{width: 240px;
       height: 240px;
          background-color: #fff;}
      .last-right li a{display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;}
       .last-right-pic{width: 160px;
       height: 120px;
       background-image: url(./image/摄像机.jpg);
       background-repeat: no-repeat;
       background-size: 100%;
       }
       .last-right-p1{font-size: 14px;
       color: #000;}
       .last-right-p2{font-size: 12px;
       color: #666;}
       .last-right-p3{font-size: 14px;
       color: #ff6700;}
       .box-db{width: 1200px;
       height: 400px;
       margin-top: 30px;}
       .box-db-top{width: 100%;
           height: 50px;
           display: flex;
           justify-content: space-around;
           align-items: center;
           }
           .box-db-top a{font-size: 14px;
           color: #999;

           }
           .box-db-top a span{font-size: 14px;
           color: #999;
           margin: 0 30px;
           }
           .box-db-bom{width: 100%;
           height: 350px;
           display: flex;
           border-top: 1px solid #888;
           flex-wrap: wrap;}

          .db-bom-left{width: 900px;
          height: 300px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          }
          .db-bom-right{width: 300px;
          height: 300px;}
          .bottom{width: 1200px;
          height: 50px;}

.db-bom-left-fr,.db-bom-left-fr a{width: 100px;
height: 200px;
}
.db-bom-left-fr a{display: flex;
flex-direction: column;
justify-content: space-around;}
.db-bom-left-fr a h3{font: 14px;
color: #333;}
.db-bom-left-fr-p1{font-size: 12px;
color: #888;}

    </style>

</head>
<body>
    <div class="header">
      <ul class="header-left">
          
              <li><a href="">大米网</a><span>|</span></li>
              <li><a href="">MIUI</a><span>|</span></li>
              <li><a href="">米聊</a><span>|</span></li>
              <li><a href="">游戏</a><span>|</span></li>
              <li><a href="">多看阅读</a><span>|</span></li>
              <li><a href="">云服务</a><span>|</span></li>
              <li><a href="">大米移动版</a><span>|</span></li>
              <li><a href="">问题反馈</a><span>|</span></li>
              <li><a href=""> Select Region</a></li>

        </ul>
      <div class="header-right">
          <div class="header-right-le">
              <a href="#">登陆</a> <span>|</span><a href="#">注册</a>
          </div>
          <div class="header-right-ri"><a href="#">购物车（0）</a></div>
      </div>
    </div>
    <div class="nav-box">
        <div class="nav-box-left"></div>
        <ul class="nav-box-mi">
            <li><a href="#">大米手机</a></li>
            <li><a href="#">红米</a></li>
            <li><a href="#">平板</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">盒子</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>

        </ul>
        <div class="nav-box-right">
            <input type="text" name="text">
            <div class="nav-box-right-logo"></div>
        </div>
    </div>
    <div class="lunbotu-box">
        <ul class="lunbotu-home">
            <li><a href="#">
                <span>手机平板</span><span>></span>
            </a></li>
            <li><a href="#">
                 <span> 电视盒子</span><span>></span> 

            </a></li>
            <li><a href="#">
                 <span> 路由器 智能硬件</span><span>></span></a></li>
            <li><a href="#">
                 <span>移动电源插线板</span><span>></span></a></li>
            <li><a href="#">
                 <span>耳机音箱</span><span>></span></a></li>
            <li><a href="#">
                 <span>电池存储卡</span><span>></span></a></li>
            <li><a href="#">
                 <span>保护套后盖</span> <span>></span></a></li>
            <li><a href="#">
                 <span>贴膜其他配件</span><span>></span></a></li>
            <li><a href="#">
                 <span>米兔服装 </span><span>></span></a></li>
            <li><a href="#">
                 <span>背包其他周边</span><span>></span></a></li>

        </ul>
        <div class="lunbotu-right"></div>
    </div>
    <div class="section">
        <ul class="section-fr">
     <li><a href="#">
         <p>RETROFIT</p>
         <p>官方产品</p>
     </a></li>
     <li><a href="#">
        <p>RETROFIT</p>
         <p>官方产品</p>
    </a></li>
    <li><a href="#">
        <p>RETROFIT</p>
         <p>官方产品</p>
    </a></li>
    <li><a href="#">
        <p>RETROFIT</p>
        <p>官方产品</p>
    </a></li>
    <li><a href="#">
        <p>RETROFIT</p>
         <p>官方产品</p>
    </a></li>
    <li><a href="#">
        <p>RETROFIT</p>
        <p>官方产品</p>
    </a></li>

        </ul>
        <div class="section-se"></div>
        <div class="section-th"></div>
        <div class="section-fou"></div>

    </div>
    
    <div class="danpin-box">
        <h3>小米明星单品</h3>
        <div class="danpin-list-container">
            <ul>
                <li><a href="#">
                    <div class="danpin-list-pic"></div>
                    <p class="danpin-list-p1">大米平板</p>
                    <p class="danpin-list-p2">全球首款</p>
                </a></li>
                <li><a href="#">
                    <div class="danpin-list-pic"></div>
                    <p class="danpin-list-p1">大米平板</p>
                    <p class="danpin-list-p2">全球首款</p>
                </a></li>
                <li><a href="#">
                    <div class="danpin-list-pic"></div>
                    <p class="danpin-list-p1">大米平板</p>
                    <p class="danpin-list-p2">全球首款</p>
                </a></li>
                <li><a href="#">
                    <div class="danpin-list-pic"></div>
                    <p class="danpin-list-p1">大米平板</p>
                    <p class="danpin-list-p2">全球首款</p>
                </a></li>
                <li><a href="#">
                    <div class="danpin-list-pic"></div>
                    <p class="danpin-list-p1">大米平板</p>
                    <p class="danpin-list-p2">全球首款</p>
                </a></li>
            </ul>
        </div>
        
    </div>
    <div class="last-box">
        <h3>智能硬件</h3>
        <div class="last-box-container">
            <div class="last-left"><a href=""><img src="./image/净化器.jpg" alt=""></a></div>
            <ul class="last-right">
                <li><a href="">
                    <div class="last-right-pic"></div>
                    <p class="last-right-p1">小米智能摄像机</p>
                    <p class="last-right-p2">能看能听能说，手机远程观看</p>
                    <p class="last-right-p3">149元</p>
                </a></li>
                <li><a href="">
                    <div class="last-right-pic"></div>
                    <p class="last-right-p1">小米智能摄像机</p>
                    <p class="last-right-p2">能看能听能说，手机远程观看</p>
                    <p class="last-right-p3">149元</p>
                </a></li>
                <li><a href="">
                    <div class="last-right-pic"></div>
                    <p class="last-right-p1">小米智能摄像机</p>
                    <p class="last-right-p2">能看能听能说，手机远程观看</p>
                    <p class="last-right-p3">149元</p>
                </a></li>
                <li><a href="">
                    <div class="last-right-pic"></div>
                    <p class="last-right-p1">小米智能摄像机</p>
                    <p class="last-right-p2">能看能听能说，手机远程观看</p>
                    <p class="last-right-p3">149元</p>
                </a></li>
                <li><a href="">
                    <div class="last-right-pic"></div>
                    <p class="last-right-p1">小米智能摄像机</p>
                    <p class="last-right-p2">能看能听能说，手机远程观看</p>
                    <p class="last-right-p3">149元</p>
                </a></li>
                <li><a href="">
                    <div class="last-right-pic"></div>
                    <p class="last-right-p1">小米智能摄像机</p>
                    <p class="last-right-p2">能看能听能说，手机远程观看</p>
                    <p class="last-right-p3">149元</p>
                </a></li>
                <li><a href="">
                    <div class="last-right-pic"></div>
                    <p class="last-right-p1">小米智能摄像机</p>
                    <p class="last-right-p2">能看能听能说，手机远程观看</p>
                    <p class="last-right-p3">149元</p>
                </a></li>
                <li><a href="">
                    <div class="last-right-pic"></div>
                    <p class="last-right-p1">小米智能摄像机</p>
                    <p class="last-right-p2">能看能听能说，手机远程观看</p>
                    <p class="last-right-p3">149元</p>
                </a></li>

            </ul>

        </div>
        <div class="box-db">
            <div class="box-db-top">
                <a href="#">1小时快修服务 <span>|</span></a>
                <a href="#">1小时快修服务 <span>|</span></a>
                <a href="#">1小时快修服务 <span>|</span></a>
                <a href="#">1小时快修服务 <span>|</span></a>
                <a href="#">1小时快修服务 </a>
            </div>
            <div class="box-db-bom">
                <div class="db-bom-left">
                    <div class="db-bom-left-fr">
                        <a href="#">
                            <h3>帮助中心</h3>
                            <p class="db-bom-left-fr-p1">购物指南</p>
                            <p class="db-bom-left-fr-p1">支付方式</p>
                            <p class="db-bom-left-fr-p1">配送方式</p>
                        
                        </a>
                    </div>
                    <div class="db-bom-left-fr">
                        <a href="#">
                            <h3>帮助中心</h3>
                            <p class="db-bom-left-fr-p1">购物指南</p>
                            <p class="db-bom-left-fr-p1">支付方式</p>
                            <p class="db-bom-left-fr-p1">配送方式</p>
                        
                        </a>
                    </div>
                    <div class="db-bom-left-fr">
                        <a href="#">
                            <h3>帮助中心</h3>
                            <p class="db-bom-left-fr-p1">购物指南</p>
                            <p class="db-bom-left-fr-p1">支付方式</p>
                            <p class="db-bom-left-fr-p1">配送方式</p>
                        
                        </a>
                    </div>
                    <div class="db-bom-left-fr">
                        <a href="#">
                            <h3>帮助中心</h3>
                            <p class="db-bom-left-fr-p1">购物指南</p>
                            <p class="db-bom-left-fr-p1">支付方式</p>
                            <p class="db-bom-left-fr-p1">配送方式</p>
                        
                        </a>
                    </div>
                    
                </div>
                <div class="db-bom-right">
                    <a href="#">400-100-5678</a>
                    <p class="db-bom-right-p1">周一至周日8：00-18：00</p>
                    <p class="db-bom-right-p2">(仅收市话费)</p>
                    <div class="db-bom-right-kefu">24小时在线客服</div>
                </div>
                <div class="bottom">
                    <div></div>
                    <div>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 <span>|</span></a>
                        <a href="#">大米网 </a>
                    </div>
                </div>
            </div>
            

            

        </div>

    </div>
    
</body>
</html>